<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="layui/css/layui.css" />
		<script type="text/javascript" src="layui/layui.js"></script>
		<title>个人主页</title>
	</head>
	<body>
		<!-- div+CSS -->
		<!-- 	<input type="button" value="提交" class="layui-btn layui-btn-danger" /> -->
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md3 ">
					<!-- 个人信息 -->
					<div class="layui-card">
						<div class="layui-card-header layui-bg-gray">
							<span class="layui-icon layui-icon-about"></span> 个人信息
						</div>
						<div class="layui-card-body" align="center">
							<img class="layui-circle" src="img/myphoto.jpg" style="width: 100px;height: 100px;" />
							<br>
							<label class="layui-bg-black" style="font-size: 20px;padding-left: 20px;padding-right: 20px;">
								<code>老&nbsp;&nbsp;张</code>
							</label>
							<br>
							<div align="left">
								<span class="layui-icon layui-icon-location"></span>国籍：中国<br>
								<span class="layui-icon layui-icon-home"></span>地址：天津市西青区中北镇<br>
								<span class="layui-icon layui-icon-date"></span>出生日期：2019-11-19<br>
								<span class="layui-icon layui-icon-cellphone"></span>联系电话：131101442342<br>
								<span class="layui-icon layui-icon-template"></span>Email：abc@163.com<br>
							</div>
						</div>
					</div>
					<!-- 技术能力 -->
					<div class="layui-card">
						<div class="layui-card-header layui-bg-orange">
							<span class="layui-icon layui-icon-speaker"></span> 技术能力
						</div>
						<div class="layui-card-body">
							HTML5：
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
							</div> HTML5：
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
							</div> HTML5：
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
							</div> HTML5：
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
							</div> HTML5：
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md9 layui-bg-red">
					432
				</div>A
			</div>
		</div>
		<script>
			layui.use('element', function() {
				var element = layui.element;
			});
		</script>
	</body>
</html>
